var path = require('path');
var html_webpack_plugin = require('html-webpack-plugin');

// webpack提供的
var webpack = require('webpack');

module.exports = {
    // 使用配置文件置顶程序的打包入口文件
    entry: path.join(__dirname, 'main.js'),
    // 指定打包之后输出的路径和文件名称
    output: {
        // 指定输出的文件夹路径
        path: path.join(__dirname, 'dist'),
        // 指定生成的文件
        filename: 'build.js'

    },
    // 配置的是多有的文件处理的方式
    module: {
        // 文件处理的规则
        rules: [
            // 处理css文件的规则(后面两个顺序不能写反,规则是从右往左加载)
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 处理scss文件的规则(下载sass-loader 的时候,它有一个依赖包 node-sass,所以两个要一起下载)
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

            // 处理less文件的规则,要装less 和  less-roader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

            // 处理图片文件的规则(file-loader和url-loader都可以处理图片),但是url-loader依赖file-loader,所以如果使用url-loader,那两个都要下载
            // url-loader和file-loader区别:url-loader 会把图片转成base64,并且有limit的限制某个大小以上的图片不进行base64编码, 1024==1kb
            { test: /\.(png|bmp|jpg|jpeg)$/, use: ['url-loader?limit=1024'] },


            //-----------------------------------------------------------------------//
            // 处理JS文件的规则(babel-loader依赖babel-core babel-plugin-transform-runtime(插件) )
            // 还要装 babel-preset-es2015(es6的语法包)   babel-preset-stage-0 (es7的语法规则)
            // babel-preset-env(es6语法包了替代了上面两个) 这包现在顶替上面两个文件了,上面两个过时了,同时在.babelrc第一条配置一个就行了
            //  exclude: /node_modules/ 要排除这个文件夹,否则会报错,太大了,这个也是我不需要的
            // 同时加一个文件.babelrc,在里面配置一下
            { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
        ]
    },
    // 配置开发服务器
    devServer: {
        // 开启热更新  如果想要开启热更新,必须要安装插件
        hot: true,
        // 配置服务器端口号
        port: 9090,
        // 配置自动打开浏览器
        open: true,
        openPage: 'index.html', //指定服务器默认打开的是index.html页面 ,这个可写可不写,就怕版本更新,这个还是写吧
    },
    // 配置webpck插件
    plugins: [
        // 注册webpack热更新插件
        new webpack.HotModuleReplacementPlugin(),
        // 配置html插件
        new html_webpack_plugin({
            // 配置插件所操作文件的模板
            template: path.join(__dirname, 'index.html'),
            // 生成的html文件的名称
            filename: 'index.html'
        })
    ]
}